<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="top-div">
          <img src="../../assets/che-1.png" alt style="width: 100%;
  height: 208px;">
        </div>
      </el-col>
      <el-col :span="4">
        <div class="top-div" style="text-align: center;padding-top:40px">
          <div style="font-size:36px">254</div>
          <div style="font-size:24px;margin:12px 0">906个司机</div>
          <div style="margin-bottom:12px">
            <el-link type="primary" @click="handleClick">添加车辆</el-link>
          </div>
          <div>
            <el-link type="danger">删除车辆</el-link>
          </div>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="top-div">
          <el-table
            :data="tableData"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="a" label="型号" width="180"></el-table-column>
            <el-table-column prop="b" label="使用司机" width="180"></el-table-column>
            <el-table-column prop="c" label="手机号码"></el-table-column>
            <el-table-column prop="d" label="最后一次使用"></el-table-column>
            <el-table-column prop="e" label="当前温度"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="6">
        <div class="top-div">
          <img src="../../assets/che-2.png" style="width: 100%;
  height: 208px;">
        </div>
      </el-col>
      <el-col :span="4">
        <div class="top-div" style="text-align: center;padding-top:40px">
          <div style="font-size:36px">254</div>
          <div style="font-size:24px;margin-top:12px">56个司机</div>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="top-div">
          <el-table
            :data="tableData"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="a" label="型号" width="180"></el-table-column>
            <el-table-column prop="b" label="使用司机" width="180"></el-table-column>
            <el-table-column prop="c" label="手机号码"></el-table-column>
            <el-table-column prop="d" label="最后一次使用"></el-table-column>
            <el-table-column prop="e" label="当前温度"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="添加车辆" :visible.sync="dialogVisible" width="600px">
      <div>
        <el-form :inline="true" :model="formInline" label-width="70px">
          <el-form-item label="车辆型号">
            <el-input v-model="formInline.user" placeholder="车辆型号"></el-input>
          </el-form-item>
          <el-form-item label="司机姓名">
            <el-input v-model="formInline.user" placeholder="司机姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formInline.user" placeholder="手机号"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <div style="margin-top:20px">
      <el-row>
        <el-col :span="24">
          <div class="top-div" style="height:400px">
            <el-table
              :data="tableData"
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ textAlign: 'center' }"
            >
              <el-table-column prop="a" label="订单号" width="auto"></el-table-column>
              <el-table-column prop="b" label="项目名称" width="auto"></el-table-column>
              <el-table-column prop="c" label="行程站数" width="auto"></el-table-column>
              <el-table-column prop="d" label="出发时间" width="auto"></el-table-column>
              <el-table-column fixed="right" label="操作" width="auto">
                <template slot-scope="scope">
                  <el-button size="small" type="primary">派发司机</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          a: "BUSBO1",
          b: "李司机",
          c: "32",
          d: "2024-04-23 15:52",
          e: "-18℃"
        },
        {
          a: "BUSBO2",
          b: "付司机",
          c: "34",
          d: "2024-04-03 15:52",
          e: "-23℃"
        },
        {
          a: "BUSBO3",
          b: "赵司机",
          c: "544",
          d: "2024-04-30 15:22",
          e: "-8℃"
        },
        {
          a: "BUSBO4",
          b: "王司机",
          c: "5675",
          d: "2024-06-30 15:52",
          e: "-28℃"
        },
        {
          a: "BUSBO5",
          b: "宋司机",
          c: "5",
          d: "2024-04-25 15:52",
          e: "-14℃"
        },
        {
          a: "BUSBO6",
          b: "张司机",
          c: "667",
          d: "2024-04-30 15:52",
          e: "-16℃"
        }
      ],
      formInline: {
        user: "",
        region: ""
      }
    };
  },
  methods: {
    handleClick() {
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped >
.top-div {
  width: 100%;
  height: 208px;
  position: relative;

  overflow-y: auto;
  background-color: #fff;
  scrollbar-width: none;
}
.top-div img {
  width: 100%;
  height: 100%;
}
.tableDiv {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
}

/deep/ .el-table__body {
  border: none !important;
}
/deep/ .el-table th {
  font-size: 12px;
  border: none !important;
}
/deep/ .el-table td {
  font-size: 12px;
  padding: 8px 0;
  border: none !important;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  color: #fff;
  font-weight: bold;
  background: #025ddb;
  /* box-shadow: 0px 5px 10px  #B1D3F2; */
}
</style>

